<template>
    <el-main>
        <el-table :data="roles">
            <el-table-column label="ID">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="Name">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.name}}</span>
                </template>
            </el-table-column>

            <el-table-column>
                <template slot="header" slot-scope="scope">
                    <el-button
                        size="mini"
                        disabled
                        icon="el-icon-plus"
                        @click="handleAdd(scope.$index);"
                    ></el-button>
                </template>
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row);"
                        icon="el-icon-edit"
                    ></el-button>
                    <el-button
                        size="mini"
                        disabled
                        icon="el-icon-delete"
                        @click="handleDelete(scope.$index);"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="Management Form" :visible.sync="dialogFormVisible" fullscreen>
            <el-form :model="roleForm" ref="roleForm" label-position="top" size="small">
                <el-form-item label="Role ID" prop="id">
                    <el-input v-model="roleForm.id" disabled></el-input>
                </el-form-item>

                <el-form-item label="Role Name" prop="name">
                    <el-input v-model="roleForm.name" disabled></el-input>
                </el-form-item>

                <el-form-item label="Related Menus" prop="menuIds">
                    <el-transfer
                        v-model="roleForm.menuIds"
                        :data="menus"
                        :titles="[this.$t('model.menu.all'), this.$t('model.menu.select')]"
                        style="height:220px; min-width:500px;"
                        :props="{key: 'id', label: 'title', disabled: 'disabled'}"
                    ></el-transfer>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">{{ $t('button.cancel') }}</el-button>
                <el-button
                    type="primary"
                    @click="dialogFormVisible = false"
                >{{ $t('button.confirm') }}</el-button>
            </div>
        </el-dialog>
    </el-main>
</template>

<script>
import Vue from "vue";

export default {
    name: `roleMgmt`,
    data: function() {
        return {
            roles: [],
            roleForm: {},
            menus: [],
            menuIds: [],
            dialogFormVisible: false
        };
    },
    mounted: function() {
        Vue.axios
            .get(`/api/admin/role/query/listRoles`)
            .then(response => {
                //console.log(JSON.stringify(response.data))
                if (response.status === 200) {
                    this.roles = response.data;
                    return;
                }
                throw error;
            })
            .catch(error => {
                this.$router.push('/ui/login');
            });
    },
    methods: {
        handleAdd(index) {
            //do nothing so far
        },
        handleEdit(index, row) {
            this.dialogFormVisible = true;
            this.menus = [];

            Vue.axios
                .get(`/api/admin/adminmenu/query/listAdminMenus`)
                .then(response => {
                    //console.log(JSON.stringify(response.data));
                    response.data.forEach(_r => {
                        this.menus = this.menus.concat(_r.children);
                    });

                    this.menus.forEach(m=>{
                        m.disabled = true;
                    });
                })
                .catch(error => {
                    this.$router.push('/ui/login');
                });

            this.roleForm = row;

            this.roleForm.menuIds = [];
            row.menus.every(m => {
                this.roleForm.menuIds.push(m.id);
                return true;
            });
            // console.log(JSON.stringify(this.roleForm.menuIds))
        },
        handleDelete(index) {}
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
</style>
